<template>
    <div id="mapView" class="relative"></div>
</template>

<script>
/* eslint-disable */
import geomapUtils from '@/utils/geomap-utils';
const dojoConfig = {
    async: true,
    packages: [
        {
            location: '/libs/geomap',
            name: 'geomap',
        },
    ],
};
window.dojoConfig = dojoConfig;
window.dojoCss = 'https://js.arcgis.com/3.34/esri/css/esri.css';
window.dojoUrl = 'https://js.arcgis.com/3.34/';
export default {
    name: 'map-view',
    data() {
        return {
            map: null,
            mapKey: Date.now() + '',
        };
    },
    created() {},
    mounted() {
        this.initMap();
    },
    methods: {
        initMap() {
            // 这里可以使用自己的地址
            console.log(geomapUtils);
            const mapDef = geomapUtils.map.initMapView(this.$el);
            mapDef.then(map => {
                const maputils = new geomapUtils.layer.LayerUtils(map);
                maputils.addLayer(maputils, 'arcGISDynamicMapServiceLayer', {
                    layerName: 'testArcGISDynamicMapServiceLayer',
                    opacity: 0.8,
                    layerUrl:
                        'https://sampleserver6.arcgisonline.com/arcgis/rest/services/SampleWorldCities/MapServer',
                    // 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer',
                });

                map.on('load', () => {
                    const geoDef = geomapUtils.map.initGeometry('point', {
                        x: 120.490070096,
                        y: 30.8182790819,
                    });
                    const symDef = geomapUtils.map.initSymbol({
                        color: [255, 255, 255, 64],
                        size: 12,
                        angle: 0,
                        xoffset: 0,
                        yoffset: 0,
                        type: 'esriSMS',
                        style: 'esriSMSCircle',
                        outline: {
                            color: [0, 0, 0, 255],
                            width: 1,
                            type: 'esriSLS',
                            style: 'esriSLSSolid',
                        },
                    });
                    Promise.all([geoDef, symDef]).then(([poi, sym]) => {
                        console.log(poi, sym);
                        map.centerAndZoom(poi, 10);
                        maputils.createGraphic(map.graphics, { geometry: poi, symbol: sym });
                    });

                    fetch('/data/heatData.json')
                        .then(response => {
                            if (!response.ok) {
                                throw new Error('Network response was not ok');
                            }
                            return response.text(); // 返回一个 Promise，解析为响应的文本内容
                        })
                        .then(data => {
                            data = JSON.parse(data);
                            maputils.addLayer(map, 'heatMapLayer', {
                                layerName: 'testHeatMapLayer',
                                lngFieldName: 'longitude',
                                latFieldName: 'latitude',
                                countFieldName: 'count',
                                data: data,
                                //minScale: 10000000,//设置热力图最小显示比例尺
                                options: {
                                    opacity: 0.7, //控制图层透明度，默认值是0.8
                                    gradient: {
                                        /*不支持单个设置透明度的写法，写成"rgba(0,0,255,0.5)"与"rgb(0,0,255)"效果一样*/
                                        0.25: 'rgb(0,0,255)',
                                        0.55: 'rgb(0,255,0)',
                                        0.85: 'rgb(255,255,0)',
                                        1.0: 'rgb(255,0,0)',
                                    },
                                    legendOptions: {
                                        style: {}, //可以控制容器的背景色、字体、宽度等属性
                                        canvasHeight: 100, // 图例渐变色高度,默认值是120
                                        canvasWidth: 20, // 图例渐变色宽度，默认值是20
                                    },
                                    radius: 25, //阴影半径
                                },
                                callback: function () {},
                            });
                        })
                        .catch(error => {
                            console.error('There was a problem with the fetch operation:', error);
                        });

                    function getData(num = 10001) {
                        var data = [];
                        for (var i = 0; i < num; i++) {
                            data.push({
                                x: 105 + Math.random() * 5,
                                y: 30 + Math.random() * 5,
                                name: '测试' + i,
                            });
                        }
                        return data;
                    }

                    let options = {
                        layerName: 'testClusterLayer',
                        maxSingles: 300, //聚类点位数值超过这个值，点击不散开
                        thresholdValue: 1000, //超过这个数据才开始聚类
                        clusterUpperLimitLevel: 14, //地图超过这个级别就不再聚类
                        options: { sr: 4326 },
                        data: getData(),
                        //鼠标点击事件
                        onClick: function (evt) {
                            var data = evt.data;
                            var html = `<div>
                                WGS84大地坐标系：
                                <div>经度：${data._x}</div>
                                <div>纬度：${data._y}</div>
                                 墨卡托投影坐标系：
                                <div>经度：${data.x}</div>
                                <div>纬度：${data.y}</div>
                            </div>
                            `;
                            console.log(evt);
                            // evt.mapUtils.openInfoWindow(evt.getLocation(), {
                            //     protCode: '4',
                            //     protContent: html,
                            //     openTypeCode: '10',
                            //     title: '标题',
                            // });
                        },
                        callback: function (res) {
                            console.log(res);
                        },
                        labelOptions: {
                            textField: 'name', //显示字段名称
                            scaleInfo: { minScale: 100000 },
                            /*label样式，label上下左右的偏移值、位置、最大宽度需要在labelStyle中单独设置，不能直接写在css中*/
                            labelSymbol: {
                                labelClass: 'labelInfo',
                                labelStyle: {
                                    offsety: 0, //上下偏移值，正数表示向上偏移
                                    offsetx: 10, //左右偏移值，正数表示向右偏移
                                    position: 'right', //label的位置，top表示图标的正上方，right表示图标的右边，位置过长时，建议右侧放置，支持换行
                                    maxWidth: 200, //设置最大值，可以让文字换行
                                },
                            },
                        },
                    };
                    maputils.addLayer(maputils, 'pointLayer', {
                        layerName: 'testPointLayer2',
                        data: [
                            {
                                x: 113.785661,
                                y: 22.75723,
                                name: '测试点名称',
                            },
                            { x: 121.8, y: 30, name: '测试点2' },
                            { x: 121.5, y: 32, name: '测试点3' },
                        ],
                    });
                    maputils.addLayer(maputils, 'polylineLayer', {
                        layerName: 'testPolylineLayer2',
                        data: [
                            {
                                name: '线1',
                                paths: [
                                    [
                                        [115.2, 31.5],
                                        [116, 31.5],
                                        [118, 31.5],
                                        [119, 31.5],
                                    ],
                                ],
                            },
                            {
                                name: '线2',
                                paths: [
                                    [
                                        [121.2, 32.1],
                                        [122.5, 32.2],
                                        [124.7, 32.5],
                                    ],
                                ],
                            },
                            {
                                name: '线3',
                                paths: [
                                    [
                                        [120.2, 33.1],
                                        [121.5, 33.2],
                                        [122.7, 33.5],
                                    ],
                                ],
                            },
                        ],
                    });
                    maputils.addLayer(maputils, 'clusterLayer', options);
                    var polygonData = [
                        {
                            name: '多边形2',
                            symbol: {
                                symbol: 'simplePolygon',
                                type: 'esriSFS',
                                style: 'esriSFSSolid',
                                color: [0, 255, 0, 100],
                                outline: {
                                    color: [0, 255, 0],
                                    type: 'esriSLS',
                                    style: 'esriSLSDash',
                                    width: 2,
                                },
                            },
                            rings: [
                                [
                                    [120.2, 30],
                                    [125.5, 30],
                                    [125.5, 35],
                                    [120.2, 35],
                                    [120.2, 30],
                                ],
                            ],
                        },
                        {
                            name: '多边形3',
                            symbol: {
                                symbol: 'simplePolygon',
                                type: 'esriSFS',
                                style: 'esriSFSNull',
                                color: [255, 0, 0, 100],
                                outline: {
                                    color: [255, 0, 0],
                                    type: 'esriSLS',
                                    style: 'esriSLSDot',
                                    width: 2,
                                },
                            },
                            rings: [
                                [
                                    [120.2, 38],
                                    [125.5, 38],
                                    [125.5, 36],
                                    [120.2, 36],
                                    [120.2, 38],
                                ],
                            ],
                        },
                    ];
                    maputils.addLayer(maputils, 'polygonLayer', {
                        layerName: 'testPolygonLayer2',
                        symbolFieldName: 'symbol',
                        data: polygonData,
                    });
                });
            });
        },
    },
};
</script>

<style lang="less">
#mapView {
    height: 100%;
    .esriBasemapGalleryLabelContainer {
        height: 40px !important;
    }
    #myOverviewMapDiv {
        position: absolute;
        right: 35px;
        top: 5px;
        z-index: 998;
        width: 100px;
        height: 100px;
    }
    .arcgisSearch {
        z-index: 20;
        height: 95px;
        width: 400px;
        position: absolute;
        top: 5px;
        left: 50% !important;
        transform: translateX(-50%);
    }

    .esriMeasurementResultValue {
        font-size: 1rem;
    }
    .dijitToggleButtonIconChar,
    .esriMeasurementSeparator,
    .dijitOffScreen {
        display: none;
    }
    .esriMeasurement .dijitContentPane {
        text-align: center;
    }
    .esriPopup .contentPane {
        padding-top: 30px;
        width: 270px;
        text-align: center;
        overflow: hidden;
    }
}
</style>
